<template>
  <div class="hello">
    <Slide ref="s" :options='slideOptions'>

    </Slide>
  </div>
</template>

<script>
// import Slide from './slide';
import Slide from './slide';
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      slideOptions : {
        contents : [ { url : 'http://www.cnr.cn/tech/techgd/201310/W020131023174153504734.jpg',
         className : 'slideName1'}, { url : 'http://img0.imgtn.bdimg.com/it/u=1904148710,4037609358&fm=214&gp=0.jpg',
          className : 'slideName2'},
          { url : 'http://img3.hackhome.com/img2015/5/5/2015050552864217.jpg',
           className : 'slideName3'},
           {
             url : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503170005032&di=ac5ee4ee93c0175202ba5dc3a3e6bce4&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140606%2F318757-1406060S35991.jpg',
             className : 'slideName4'
           },

         ],
        loop:false
      }
    }
  },
  mounted(){
    // setTimeout(() => {
    //     this.$refs.s.scrollTo(3);
    //     setTimeout(() => {
    //         this.$refs.s.scrollTo(2);
    //         setTimeout(() => {
    //             this.$refs.s.scrollTo(1);
    //             setTimeout(() => {
    //                 this.$refs.s.scrollTo(2);
    //                   this.$refs.s.scrollTo(4);
    //                   this.$refs.s.scrollTo(-1);
    //             },200);
    //         },100);
    //     },500);
    // },1000);
    setTimeout(() => {
      this.$refs.s.scrollTo(3);
    },300);

  },
  components:{
    Slide
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
